<!DOCTYPE html>
<html>
<head>
    <title>Ectivise Cloud</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="shortcut icon" type="image/png" href="http://www.ectivise.com/images/colors/green/logo.png"/>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        .responsive {
            width: 100%;
            max-width: 400px;
            height: auto;
        }

        .inputcell {
            width: 200px;
            height: 15px;
            background: #f5f5f5;
            border: 1px solid rgb(221, 221, 221);
            padding: 5px;
            color: blue
        }

        .inputcell[placeholder]:empty:before {
            content: attr(placeholder);
            color: rgb(194, 184, 184);
        }
    </style>
    <style>
        .the-legend {
            border-style: none;
            border-width: 0;
            font-size: 14px;
            line-height: 20px;
            margin-bottom: 0;
            width: auto;
            padding: 0 10px;
        }

        .the-fieldset {
            border: 5px solid #e0e0e0;
            padding: 10px;
        }
    </style>

    <style>
        body {font-family: Arial, Helvetica, sans-serif;}

        /* Full-width input fields */
        input[type=text], input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }

        /* Set a style for all buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }

        button:hover {
            opacity: 0.8;
        }

        /* Extra styles for the cancel button */
        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }

        /* Center the image and position the close button */
        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
            position: relative;
        }

        img.avatar {
            width: 40%;
            border-radius: 50%;
        }

        .container {
            padding: 16px;
        }

        span.psw {
            float: right;
            padding-top: 16px;
        }

        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
            padding-top: 60px;
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
            border: 1px solid #888;
            width: 80%; /* Could be more or less, depending on screen size */
        }

        /* The Close Button (x) */
        .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }

        /* Add Zoom Animation */
        .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
        }

        @-webkit-keyframes animatezoom {
            from {-webkit-transform: scale(0)}
            to {-webkit-transform: scale(1)}
        }

        @keyframes animatezoom {
            from {transform: scale(0)}
            to {transform: scale(1)}
        }

        /* Change styles for span and cancel button on extra small screens */
        @media screen and (max-width: 300px) {
            span.psw {
                display: block;
                float: none;
            }
            .cancelbtn {
                width: 100%;
            }
        }
    </style>

    <script>
        function fun_gponcal() {
            debugger;
            var unitPrice4p = parseFloat('787.00');
            var unitPrice8p = parseFloat('1634.00');
            var oltPrice8p = parseFloat('201566.80');
            var oltPrice16p = parseFloat('671732.00');
            var oltPrice16p_1 = parseFloat('880072.00');
            var endpoints_1 = $("#_endpoints").val().trim();
            if (endpoints_1 == '') {
                // debugger;
                alert('Please input the number of endpoints');
                return false;
            }
            var endpoints = endpoints_1 == '' ? 0 : parseInt(endpoints_1, 10);
            var ont4port = Math.ceil(endpoints / 4);
            var ont8port = Math.ceil(endpoints / 8);
            document.getElementById("nosont4").innerHTML = ont4port.toString();
            document.getElementById("nosont8").innerHTML = ont8port.toString();
            var ea5801G084psub = ont4port * unitPrice4p;
            var ea5801G088psub = ont8port * unitPrice8p;
            document.getElementById("ea5801G084psub").innerHTML = ea5801G084psub.toString();
            document.getElementById("ea5801G088psub").innerHTML = ea5801G088psub.toString();

            document.getElementById("ea5801G084pkg").innerHTML = (ea5801G084psub + oltPrice8p).toString();
            document.getElementById("ea5801G088pkg").innerHTML = (ea5801G088psub + oltPrice16p).toString();

            document.getElementById("ea5800x2_4pkg").innerHTML = (ea5801G084psub + oltPrice16p).toString();
            document.getElementById("ea5800x2_8pkg").innerHTML = (ea5801G088psub + oltPrice16p).toString();

            var ea5800x, ea5800x1;
            document.getElementById("ea5800x7_4pkg").innerHTML = (unitPrice4p * ont4port + oltPrice16p_1).toString();
            document.getElementById("ea5800x7_8pkg").innerHTML = (unitPrice8p * ont8port + oltPrice16p_1).toString();

            // debugger;
            //console.log(document.getElementById('endpoints').value);
        }
    </script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <script>
        $(function () {
            $("#datepicker").datepicker();
            $("#anim").change(function () {
                $("#datepicker").datepicker("option", "showAnim", $(this).val());
            });
        });
    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js"
            integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js"></script>
</head>
<body>
<!--Test code-->
<!--<h2>Modal Login Form</h2>-->
<!--<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>-->

<script>
    $(document).ready(function () {
        //console.log("ready!");
        $("#bt_logout").click(function () {
            // debugger
            var settings = {
                "async": true,
                "crossDomain": true,
                "url": "/logout",
                "method": "POST",
                "headers": {
                    "Content-Type": "application/x-www-form-urlencoded",
                    "cache-control": "yes",
                },
                "data": {
                    // "email": $("#i_email").val(),
                    // "password": $("#i_pwd").val(),
                    "token":"",
                }
            }

            debugger
            $.ajax(settings).done(function (response) {
                console.log(response);
                if(response == 'ok')
                window.location.replace("http://localhost:8081/");
                //window.location.href('http://www.ectivisecloud.com');
                //alert(response)
            });
        });
    });
</script>
<!--<img   alt="Ectivise logo" src="http://qms.ectivisecloud.com/images/ectiviselogo.png" width="80px">-->
<!-- Header -->
<header id="js-header" class="u-header u-header--sticky-top u-header--toggle-section u-header--change-appearance"
        data-header-fix-moment="200"
        data-header-fix-effect="slide">
    <div class="text-center text-lg-left u-header__section u-header__section--hidden u-header__section--light g-bg-white g-brd-bottom g-brd-gray-light-v4 g-py-20">
        <div class="container">
            <div class="row flex-lg-row align-items-center justify-content-lg-start">
                <div class="col-6 col-sm-3 col-lg-2">
                    <!-- Logo -->
                    <a href="#!" class="js-go-to navbar-brand"
                       data-type="static">
                        <img class="img-fluid g-width-150" src="http://www.ectivisecloud.com/logo.png"
                             alt="Ectivise Logo" width="100px">
                    </a>
                    <!-- End Logo -->
                </div>

                <div class="col-6 col-sm-9 col-lg-10">
                    <div class="row">
                        <div class="col-sm g-brd-right--sm g-brd-gray-light-v4">
                            <div class="g-pa-10--lg">
                                <span class="icon icon-screen-smartphone g-valign-middle g-font-size-5 g-color-primary g-mr-5"></span>
                                <span class="text-uppercase g-font-size-5"><small>Ectivise Cloud Service</small></span>
                                <!--<strong class="d-block g-pl-25">+65 9155 5044</strong>-->
                            </div>
                        </div>
                    </div>
                </div>
                <!--<button onclick="postMyFormData()" style="width:auto;">Logout</button>-->
                <!--<script>-->
                    <!--function myFunction() {-->
                        <!--alert("I am an alert box!");-->
                    <!--}-->
                <!--</script>-->

            </div>
        </div>
    </div>
</header>
<!-- End Header -->
<div class="jumbotron text-center">
    <div class="raw">
        <h5>Huawei GPON Package Calculate</h5>
        <small>Type of redundancy: Dual-Homing xPON Type B</small>
    </div>
    <img src="http://qms.ectivisecloud.com/images/d.png" alt="GPON Diagram" class="responsive" width="350">
</div>
<div class="container">

    <fieldset class="the-fieldset boarder p-lg-5">
        <legend class="the-legend w-auto">
            <a style="font: large">Customer Info</a>
        </legend>
        <!--<div class="row">-->
        <div class="col-md-4 col-md-offset-4">
            <div class="panel-body">
                <!--<fieldset>-->
                <div class="form-group has-success">
                    Customer:<input class="form-control input-lg" placeholder="Customer name" id="cust"
                                    type="text">
                </div>
                <div class="form-group has-success">
                    Date of Engagement:<input type="text" id="datepicker" class="form-control input-lg">
                    <!--placeholder="Date of engagement" -->
                    <!--&gt;-->
                </div>
                <div class="form-group has-success">
                    Industry Sector:<input class="form-control input-lg" placeholder="Industry sector"
                                           id="industry" value=""
                                           type="text" required="true">
                </div>
                <div class="form-group has-success">
                    Number of end points estimated:<input class="form-control input-lg"
                                                          placeholder="Number of end points"
                                                          id="_endpoints" value=""
                                                          type="text" required="true">
                </div>
            </div>
        </div>
    </fieldset>
    <br>
    <button class="btn btn-lg btn-primary btn-block" type="button" name="button"
            onclick="fun_gponcal()">
        Click to Calculate
    </button>
    <table class="table table-striped p-lg-5" cellspacing="0" border="1" id="">
        <tr>
            <td style="width:70%">Number of 4 Port ONT</td>
            <td style="width:30%" id="nosont4">0</td>
        </tr>
        <tr>
            <td style="width:70%">Number of 8 Port ONT</td>
            <td style="width:30%" id="nosont8">0</td>
        </tr>
        <tr hidden>
            <td style="width:70%" hidden>
                SmartAX EA5801-GP08 Dual Homing 8 PON Ports OLT Unit Price
            </td>
            <td style="width:30%" id="ea5801gp088uprice">00</td>
        </tr>
        <tr hidden>
            <td style="width:70%">
                SmartAX EA5800-X2 Dual Homing 16 PON Ports OLT Unit Price
            </td>
            <td style="width:30%" id="ea5800x2unprice">00</td>
        </tr>
        <tr hidden>
            <td style="width:70%">
                SmartAX EA5800-X7 Dual Homing 16 PON Ports OLT Unit Price
            </td>
            <td style="width:30%" id="ea5800x7uprice">00</td>
        </tr>
        <tr>
            <td style="width:70%">EA5801-G08 4 Port ONT Sub Total</td>
            <td style="width:30%" id="ea5801G084psub">0</td>
        </tr>
        <tr>
            <td style="width:70%">EA5801-G08 8 Port ONT Sub Total</td>
            <td style="width:30%" id="ea5801G088psub">0</td>
        </tr>
        <tr>
            <td style="width:70%">EA5801-GP08 4 Ports ONT Package Price</td>
            <td style="width:30%" id="ea5801G084pkg">0
            </td>
        </tr>
        <tr>
            <td style="width:70%">EA5801-GP08 8 Ports ONT Package Price</td>
            <td style="width:30%" id="ea5801G088pkg">0</td>
        </tr>
        <tr>
            <td style="width:70%">
                SmartAX EA5800-X2 4 Ports ONT Package Price
            </td>
            <td style="width:30%" id="ea5800x2_4pkg">0</td>
        </tr>
        <tr>
            <td style="width:70%">
                SmartAX EA5800-X2 8 Ports ONT Package Price
            </td>
            <td style="width:30%" id="ea5800x2_8pkg">0</td>
        </tr>
        <tr>
            <td style="width:70%">
                SmartAX EA5800-X7 4 Ports ONT Package Price
            </td>
            <td style="width:30%" id="ea5800x7_4pkg">0</td>
        </tr>
        <tr>
            <td style="width:70%">
                SmartAX EA5800-X7 8 Ports ONT Package Price
            </td>
            <td style="width:30%" id="ea5800x7_8pkg">0</td>
        </tr>
    </table>
</div>

<div id="id01" class="modal">
    <form class="modal-content animate" action="/action_page.php">
        <div class="imgcontainer">
            <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
            <!--<img src="img_avatar2.png" alt="Avatar" class="avatar">-->
        </div>

        <div class="container">
            <label for="uname"><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="uname" required>

            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>

            <button type="submit">Login</button>
            <label>
                <input type="checkbox" checked="checked" name="remember"> Remember me
            </label>
        </div>

        <div class="container" style="background-color:#f1f1f1">
            <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">
                Cancel
            </button>
            <span class="psw">Forgot <a href="#">password?</a></span>
        </div>
    </form>
</div>
<script>
    // Get the modal
    var modal = document.getElementById('id01');
    modal.style.display = "none";
    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>

</body>
</html>